<template>
  <div class="show">
    <div class="title">修改信息</div>
    <el-form
             :model="userInfo"
             ref="editUserRef"
             status-icon
             v-loading="loading">
      <el-form-item
          label="账号"
          class="item"
          >
        <el-input v-model="userInfo.account"
                  class="input"
                  disabled>
        </el-input>
      </el-form-item>
      <el-form-item
          label="姓名"
          class="item-rule"
          prop="adminName"
          :rules="[{required: true, message: '姓名不能为空', trigger: 'change'}]">
        <el-input v-model="userInfo.adminName"
                  class="input"
                  clearable>
        </el-input>
      </el-form-item>
      <el-form-item
          label="性别"
          class="item-rule"
          prop="sex"
          :rules="[
              {required: true, message: '性别不能为空', trigger: 'change'},
              {pattern: /^(男|女){1}$/, message: '只输入男/女'}
              ]">
        <el-input v-model="userInfo.sex"
                  class="input"
                  clearable>
        </el-input>
      </el-form-item>
      <el-form-item
          label="联系电话"
          class="item-rule"
          prop="tel"
          :rules="[
              {required: true, message: '联系电话不能为空', trigger: 'change'},
              {pattern: /^(13[0-9]|14[1|4|5|6|7|8|9]|15[0|1|2|3|5|6|7|8|9]|17[2|3|5|6|7|8]|18[0-9]|19[1|8|9])\d{8}$/, message: '手机号格式不正确'}
              ]">
        <el-input v-model="userInfo.tel"
                  class="input"
                  clearable>
        </el-input>
      </el-form-item>
      <el-form-item
          label="邮箱地址"
          class="item-rule"
          prop="email"
          :rules="[
              {required: true, message: '邮箱不能为空', trigger: 'change'},
              {type: 'email', message: '请输入正确的邮箱', trigger: ['blur', 'change']},
              ]">
        <el-input v-model="userInfo.email"
                  class="input"
                  clearable>
        </el-input>
      </el-form-item>
      <el-form-item
          label="身份证号"
          class="item-rule"
          prop="cardId"
          :rules="[{required: true, message: '身份证号不能为空', trigger: 'change'}]">
        <el-input v-model="userInfo.cardId"
                  class="input"
                  clearable>
        </el-input>
      </el-form-item>
      <div class="btn">
        <el-button type="primary" class="btn btn-success pull-left" @click="editSubmit()">修改</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
import {getCurrentInstance, onMounted, ref} from "vue";
import {ElMessage} from "element-plus";
import {useRouter} from "vue-router/dist/vue-router";
import {isObjectValueEqual} from "@/utils/funUtils";

export default {
  name: "editInfo",
  setup(){
    const {proxy} = getCurrentInstance()
    const editUserRef = ref(null);
    const router = useRouter()
    let init = ref({})
    let userInfo = ref({})
    let loading = ref(false)
    let checkNumber = (rule,value,callback) => {
      const boolean = new RegExp('^[1-9][0-9]*$').test(value)
      if (!boolean) {
        callback(new Error('请输入正整数'))
      }else {
        callback()
      }
    }
    onMounted(()=>{
      getUserInfo()
    })
    function getUserInfo(){
      loading.value = true
      proxy.$axios.get(
          // eslint-disable-next-line no-undef
          `/admin/${$cookies.get("id")}`
      ).then(
          response => {
            userInfo.value = {...response.data}
            init.value = {...response.data}
            loading.value = false
          },
          error => {
            console.log('请求失败', error.message)
          }
      )
    }
    function editSubmit(){
      proxy.$refs.editUserRef.validate((valid) => {
        if (valid) {
          if (isObjectValueEqual(init.value,userInfo.value)){
            ElMessage({
              type: 'info',
              message: '信息没有改动',
            })
            return false
          }
          proxy.$axios.put(
              // eslint-disable-next-line no-undef
              `/admin/update`,
              {...userInfo.value}
          ).then(
              response => {
                if (response.data) {
                  ElMessage({
                    type: 'success',
                    message: '修改成功',
                  })
                  router.push({path: '/adminManager'})
                }
              },
              error => {
                console.log('请求失败', error.message)
              }
          )
        }else {
          return false
        }
      })


    }
    return{
      userInfo,
      editUserRef,
      loading,
      editSubmit,
      checkNumber
    }
  }
}
</script>

<style scoped>
.show{
  margin: 100px auto;
  width: 80%;
  height: 400px;
  border: 5px solid lightcyan;
  transition: all 0.9s;
  border-radius: 10px;
}
.show:hover{
  box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.4);
  margin-top: 90px;
}
.title {
  font-size: 20px;
  text-align: center;
  margin-top: 20px;
  color: #2CD9D9FF;
  display: flex;
  justify-content: center;
}
.item{
  margin-top:2%;
  margin-left:3%;
  line-height:5px;
}
.item-rule{
  margin-top:2%;
  margin-left:8px;
  line-height:5px;
}
.btn{
  display:flex;
  justify-content: center;
}
.input{
  width: 50%;
}
</style>